<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/BlogPosting">
    {% include head.html %}
    <body class="has-push-menu">
        {% include minutes-to-read.html %}
        {% include svg-icons.html %}
        {% include header.html %}
        <section class="post">

            <article role="article" id="post" class="post-content" itemprop="articleBody">
                <p itemprop="post-info" class="post-info">
                    {% if page.date %}
                        <svg id="date" class="icon-calendar"><use xlink:href="#icon-calendar"></use></svg>
                        <time itemprop="datePublished" datetime="{{ page.date | date_to_xmlschema }}" class="date">
                            {% include date.html date=page.date %}
                        </time>
                    {% endif %}
                    <svg id="clock" class="icon-clock"><use xlink:href="#icon-clock"></use></svg>
                    <span>{{ minutesText }}</span>
                </p>
                <h1 class="post-title" itemprop="name">{{ page.title }}</h1>
                <p itemprop="description" class="subtitle">{{ page.description }}</p>

                {% if page.image %}
                    <img src="{{ page.image }}" alt="Imagem de capa" class="post-cover">
                {% endif %}

                {{ content }}
            </article>

            <div class="progress-bar" data-minutes="{{ totalMinutes }}">
                <span class="time-completed"></span>
                <span class="time-remaining"></span>
                <div class="bar">
                    <span class="completed" style="width:0%;"></span>
                    <span class="remaining" style="width:100%;"></span>
                </div>
            </div>

            {% include share.html %}
            {% include author.html %}
            {% include comments.html %}
            {% include footer.html %}
        </section>
    </body>
</html>
